import React, {useState,useEffect} from "react";
import {trim} from "lodash";
import Modal from "antd/lib/modal";
import Form from "antd/lib/form";
import Input from "antd/lib/input";
import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
import DynamicComponent from "@/components/DynamicComponent";
import {UserProfile} from "@/components/proptypes";
import notification from "@/services/notification";
import {currentUser} from "@/services/auth";
import GlobalSetting from "@/services/globalsetting";

function CreateGlobalSettingDialog({ globalsetting, dialog }) {
  const [dataLoaded, setDataLoaded] = useState(globalsetting.id ===0 ? true : false);
  const [code, setCode] = useState("");
  const [value, setvalue] = useState("");
  const [type, settype] = useState("");
  const [message, setmessage] = useState("");
  const [isValid, setIsValid] = useState(false);
  const [saveInProgress, setSaveInProgress] = useState(false);
  const isCreateGlobalSettingEnabled = useState(true);//policy.isAdmin() || policy.isDefault();

  useEffect(() => {
    if (globalsetting.id === 0) return;
    setCode(globalsetting.code);
    settype(globalsetting.type);
    setvalue(globalsetting.value);
    setmessage(globalsetting.message);
    setDataLoaded(true);
  }, [globalsetting]);

  function handlevalueChange(event) {
    const value = trim(event.target.value);
    setvalue(value);
    setIsValid(value !== "");
  }

  function handleSubmit() {
    setSaveInProgress(true);
   let data={id: globalsetting.id,//
            userid: currentUser.id,//--操作员ID
            code: code,
            value: value,
            type: type,
            message: message }
      GlobalSetting.save(data)
        .then(() => {
          dialog.close({ success: true});
        })
        .catch(error => {
          notification.error(error.message, error.detailedMessage);
          setSaveInProgress(false);
        });
  }

  return (
    <Modal
      {...dialog.props}
      {...(isCreateGlobalSettingEnabled ? {} : { footer: null })}
      title="全局变量管理"
      width={document.querySelector('body').offsetWidth*0.6}
      okText="保存"
      cancelText="取消"
      okButtonProps={{
        disabled: !isValid || saveInProgress,
        loading: saveInProgress,
        "data-test": "DashboardSaveButton",
      }}
      cancelButtonProps={{
        disabled: saveInProgress,
      }}
      onOk={handleSubmit}
      closable={!saveInProgress}
      maskClosable={!saveInProgress}
      wrapProps={{
        "data-test": "CreateDashboardDialog",
      }}>
      {dataLoaded && (
      <DynamicComponent name="CreateGlobalSettingDialogExtra" disabled={!isCreateGlobalSettingEnabled}>
      <Form layout="horizontal" {...{labelCol: { span: 4 }, wrapperCol: { span: 14 },} }>
        <Form.Item style={{ marginBottom: 5 }} label="模块">
        <Input
          defaultValue={type}
          placeholder="模块"
          disabled={true}
        />
        </Form.Item>
        <Form.Item style={{ marginBottom: 5 }} label="设置内容">
        <Input
          defaultValue={code}
          placeholder="设置内容"
          disabled={true}
          autoFocus
        />
        </Form.Item>
        <Form.Item style={{ marginBottom: 5 }} label="值">
        <textarea
          rows="3" 
          value={value}
          cols={document.querySelector('body').offsetWidth*0.5/12}
          textAlignVertical="top"
          onChange={handlevalueChange}
          placeholder="值"
          disabled={saveInProgress}
          autoFocus
        />
        </Form.Item>
        <Form.Item style={{ marginBottom: 5 }} label="说明">
          <textarea
            rows="3" 
            cols={document.querySelector('body').offsetWidth*0.5/12}
            textAlignVertical="top"
            height="100px"
            value={message}
            placeholder="说明"
            disabled={true}
          />
        </Form.Item>
      </Form>
      </DynamicComponent>
      )}
    </Modal>
  );
}

CreateGlobalSettingDialog.propTypes = {
  GlobalSetting: UserProfile.isRequired,
  dialog: DialogPropType.isRequired,
};

export default wrapDialog(CreateGlobalSettingDialog);
